import React, { PureComponent } from 'react'

import { Row } from 'antd';

import { Zoom, PointC, ImgC, Point, Container, MyImg } from './styled'

interface P {
  points?: Array<any>;
  location?: Array<string>;
  image: string;
  gap?: number;
}

class MapSelet extends PureComponent<P, any> {
  imgc: any;
  imgi: any;

  constructor(props) {
    super(props);

    this.state = {
      location: this.props.location || [],
      points: this.props.points || [],
      width: 100,
      zoom: 0,
      rotate: 0,
      point: {},
    }
  }

  handleZoom = (v) => {
    const { gap = 5 } = this.props;
    const { width, location, zoom } = this.state;
    const [left, top] = location;
    const z = v * gap;

    this.setState({
      width: width + z,
      height: this.imgi.height / (1 + zoom / 100) * (1 + (z + zoom) / 100),
      zoom: z + zoom,
      point: {
        left: +left + (+left / z / 100) * (1 + (z + zoom) / 100),
        top: +top + (+top / z / 100) * (1 + (z + zoom) / 100),
      }
    });
  }

  getPosition = ({ left, top }, rotate) => {
    return { left, top }
  }

  transform = () => {
    const { rotate } = this.state;
    this.setState({ rotate: rotate + 1 })
  }

  render() {

    const { image } = this.props;
    const { points, width, height, rotate } = this.state;

    return (
      <Container>
        <ImgC>
          <PointC height={height} width={width} rotate={rotate * 90} top={rotate % 2 !== 0 ? (1 - (width / height)) / 2 * 100 : 0}>
            {
              Array.isArray(points) && points.map(v => v.show && <Point
                src={require(`../../assets/images/icon/position.png`)}
                key={v.id}
                {...this.getPosition(v, rotate)}
              />)
            }
          </PointC>
          <MyImg
            top={rotate % 2 !== 0 ? (1 - (width / height)) / 2 * 100 : 0}
            src={image}
            alt="展示图片"
            width={width}
            rotate={rotate * 90}
            ref={ref => this.imgi = ref}
            onLoad={e => this.setState({
              height: e.target.height
            })}
          />
        </ImgC>
        <Row style={{ width: "20%", height: "10%", margin: '0 auto', alignItems: 'center' }} type="flex" justify="space-around">
          <Zoom type="zoom-in" onClick={this.handleZoom.bind(this, 1)} />
          <Zoom type="zoom-out" onClick={this.handleZoom.bind(this, -1)} />
          <Zoom type="sync" onClick={this.transform} />
        </Row>
      </Container>
    )
  }
}


export default MapSelet;

/**
 * 坐标为相对图片位置的百分比
 */